<template>
  <div class="h-full">
    <EchartView
      :initEchartOptoinMethod="initEchartOptoinMethod"
      @echartMounted="onEchartMounted"
    ></EchartView>
  </div>
</template>

<script setup lang="ts">
import type { InitEchartOptoinMethod } from './typing'

const initEchartOptoinMethod: InitEchartOptoinMethod = async () => {
  return {
    legend: {
      textStyle: {
        fontSize: 15
      }
    },
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20],
        itemStyle: {
          color: function (params) {
            console.log('params', params)
          }
        }
      }
    ]
  }
}
let echartsInstance: echarts.ECharts
function onEchartMounted(instance: echarts.ECharts) {
  echartsInstance = instance
}
</script>

<style scoped></style>
